<template>
    <div class="container">

        <host style="flex: 1" @change="onchange" :index="index">
            <div class="tab-content" @load="load" @show="show">
                <div class="bar">
                    <div class="bar-left"></div>
                    <div class="bar-middle">
                        <input type="text" placeholder="请输入搜索关键词" class="bar-input" :autofocus=true value=""/>
                        <image class="bar-middle-input-btn" src="root:img/bar_search_btn.png"></image>
                    </div>
                    <div class="bar-right" @click="minibarRightButtonClick">
                        <image class="bar-right-icon" src="root:img/conment_btn.png"></image>
                        <text class="release">发布</text>
                    </div>
                    <wxc-popover ref="wxc-popover"
                                 :buttons="releBtns"
                                 :position="popoverPosition"
                                 :arrowPosition="popoverArrowPosition"
                                 @wxcPopoverButtonClicked="popoverButtonClicked"></wxc-popover>
                </div>
                <tagPage></tagPage>
            </div>
            <div class="tab-content">
                <div>
                    <head-bar :rightClick="jumpCustomerByAdd" height="80" middleText="我的客户" leftText=""  :rightIcons="['search','add']"></head-bar>
                    <!--<div class="head-top"></div>-->
                    <!--<div class="head-panel">-->
                        <!--<div class="head-left"></div>-->
                        <!--<div class="head-middle">-->
                            <!--<text class="head-middle-t">我的客户</text>-->
                        <!--</div>-->
                        <!--<div class="head-right">-->
                            <!--<image class="customer-head-add"-->
                                   <!--src="root:img/search.png"></image>-->
                            <!--<image @click="jumpFollowByAdd" class="customer-head-search" src="root:img/add.png"></image>-->
                        <!--</div>-->
                    <!--</div>-->
                </div>
                <div class="tab-area">
                    <div @click="changeCustomer(0)" :class="['tab-li', customerIndex == 0 ? 'active':'']">
                        <text :class="['tab-t',customerIndex == 0 ? 'active-text':'']">采购商客户({{buyers.length}})</text>
                    </div>
                    <div @click="changeCustomer(1)" :class="['tab-li', customerIndex == 1 ? 'active':'']">
                        <text :class="['tab-t',customerIndex == 1 ? 'active-text':'']">供应商客户({{suppers.length}})</text>
                    </div>
                </div>
                <host style="flex: 1" :index="customerIndex">
                    <div @load="load" class="tab-content">
                        <list>
                            <cell v-for="v in buyers">
                                <div class="item">
                                    <div class="item-head">
                                        <div class="item-title">
                                            <text class="item-title-t">{{v.buyerName}}</text>
                                            <text class="team tag" v-if="v.isStrategic == 1000">合</text>
                                            <text class="past tag" v-if="v.lateCount > 0">逾</text>
                                        </div>
                                        <div class="item-stat">
                                            <text class="item-stat-t">{{getStatName(v.userStatus)}}</text>
                                        </div>
                                    </div>
                                    <div class="item-content">
                                        <div class="content-ul">
                                            <text class="content-t content-text">应付款：￥{{v.paymentAmount}}</text>
                                            <text class="content-t content-text">应还款：￥{{getRepayAmount(v)}}</text>
                                            <text class="content-t content-text">最近跟进：{{formatTime(v.createTime)}}
                                            </text>
                                        </div>
                                        <div class="item-link">
                                            <image class="item-link-i" src="root:img/right_arrow.png"></image>
                                        </div>
                                    </div>
                                    <div class="item-btns">
                                        <div class="item-btn">
                                            <text @click="jumpFollowByAdd(v.userBuyerId,'buyer')" class="btn-font">写跟进</text>
                                        </div>
                                        <div class="item-btn">
                                            <text class="btn-font">建任务</text>
                                        </div>
                                        <div class="item-btn">
                                            <text class="btn-font">打电话</text>
                                        </div>
                                    </div>
                                </div>
                            </cell>
                        </list>
                    </div>
                    <div class="tab-content">
                        <list>
                            <cell v-for="v in suppers">
                                <div class="item supper-item">
                                    <div class="item-head">
                                        <div class="item-title">
                                            <text class="item-title-t">{{v.org_name}}</text>
                                            <text class="team tag" v-if="v.is_strategic == 1000">合</text>
                                        </div>
                                        <div class="item-stat">
                                            <text class="item-stat-t">{{getStatName(v.status)}}</text>
                                        </div>
                                    </div>
                                    <div class="item-supper-content">
                                        <div class="content-ul">
                                            <text class="content-t content-text">联系人：{{getlinkman(v)}}</text>
                                            <text class="content-t content-text">最近跟进：{{formatTime(v.follow_time)}}
                                            </text>
                                        </div>
                                        <div class="item-link">
                                            <image class="item-link-i" src="root:img/right_arrow.png"></image>
                                        </div>
                                    </div>
                                    <div class="item-btns">
                                        <div class="item-btn">
                                            <text @click="jumpFollowByAdd(v.user_supper_id,'supper')" class="btn-font">写跟进</text>
                                        </div>
                                        <div class="item-btn">
                                            <text class="btn-font">建任务</text>
                                        </div>
                                        <div class="item-btn">
                                            <text class="btn-font">打电话</text>
                                        </div>
                                    </div>
                                </div>
                            </cell>
                        </list>
                    </div>
                </host>
            </div>
            <div class="tab-content">
                <address></address>
            </div>
            <div class="tab-content">
                <my-user></my-user>
            </div>
        </host>

        <div class="bottom-bar">
            <div class="nav-tab" @click="change(0)">
                <image style="width: 48px;height: 48px;" :src="btns[0].icon"></image>
                <text :style="btns[0].style">{{btns[0].text}}</text>
            </div>
            <div class="nav-tab" @click="change(1)">
                <image style="width: 48px;height: 48px;" :src="btns[1].icon"></image>
                <text :style="btns[1].style">{{btns[1].text}}</text>
            </div>
            <div class="nav-tab" @click="change(2)">
                <image style="width: 48px;height: 48px;" :src="btns[2].icon"></image>
                <text :style="btns[2].style">{{btns[2].text}}</text>
            </div>
            <div class="nav-tab" @click="change(3)">
                <image style="width: 48px;height: 48px;" :src="btns[3].icon"></image>
                <text :style="btns[3].style">{{btns[3].text}}</text>
            </div>
        </div>
    </div>
</template>

<style>

    /*主容器*/
    .container {
        flex: 1;
        background-color: #ffffff;
    }

    /*切换栏目*/
    .tab-content {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }

    /*导航条*/
    .bottom-bar {
        height: 100px;
        width: 750px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        flex-direction: row;
        background-color: white;
        border-top-width: 1px;
        border-top-color: #cbcbcb;
    }

    /*切换栏按钮*/
    .nav-tab {
        flex: 1;
        align-items: center;
        justify-content: center
    }

    .bar-left {
        width: 100px;
        height: 100%;
    }

    .bar-middle {
        width: 550px;
        height: 100%;
        padding-top: 20px;
        flex-direction: row;
    }

    .bar-input {
        background-color: #ffffff;
        width: 550px;
        height: 60px;
        border-radius: 10px;
        font-size: 30px;
    }

    .bar-middle-input-btn {
        width: 39px;
        height: 39px;
        position: relative;
        left: -50px;
        top: 10px;
    }

    .bar-right {
        width: 100px;
        height: 100%;
    }

    /*发布按钮*/
    .release {
        color: #ffffff;
        margin-left: 20px;
        margin-top: 30px;
        font-size: 30px;
    }

    .bar {
        height: 150px;
        padding-top: 50px;
        background-color: #00a65a;
        flex-direction: row;
    }

</style>

<style>

    .container {
        flex-direction: column-reverse;

    }

    .tab-t {
        font-size: 30px;
    }

    /*切换栏区域*/
    .tab-area {
        align-items: center;
        justify-content: center;
        height: 80px;
        width: 750px;
        background-color: white;
        flex-direction: row;
    }

    /*切换条*/
    .tab-li {
        flex: 1;
        align-items: center;
        justify-content: center;
        height: 80px;
        border-bottom-width: 2px;
        border-bottom-color: #f5f5f5;
    }

    /*活动栏*/
    .active {
        border-bottom-width: 2px;
        border-bottom-color: #00c470;
    }

    /*当前活动字体*/
    .active-text {
        color: #00c470;
    }

    /*标签栏目内容*/
    .tab-content {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-color: #f0f0f0;
    }

    .refresh {
        align-items: center;
        justify-content: center;
    }

    .loading {
        width: 750px;
        display: -ms-flex;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        -webkit-align-items: center;
        -webkit-box-align: center;
        align-items: center;
    }

    .loading-indicator-text {
        color: #888888;
        font-size: 42px;
        text-align: center;
    }

    .loading-indicator {
        margin-top: 16px;
        height: 40px;
        width: 40px;
        color: blue;
    }

    .indicator-text {
        color: #888888;
        font-size: 42px;
        text-align: center;
    }

    .item {
        height: 350px;
        width: 750px;
        margin-top: 5px;
        padding-right: 15px;
        padding-left: 15px;
        background-color: white;
    }

    .supper-item {
        height: 287px;
    }

    .item-head {
        width: 720px;
        height: 80px;
        padding-left: 10px;
        padding-right: 10px;
        flex-direction: row;
        padding-top: 25px;
        border-bottom-width: 1px;
        border-bottom-color: #dddddd;
    }

    .btn-font {
        font-size: 30px;
        color: #b4b4b4;
    }

    .content-text {
        font-size: 30px;
        color: #696969;
    }

    .item-title {
        width: 510px;
        flex-direction: row;
    }

    .item-stat {
        width: 200px;
    }

    .item-title-t {
        font-size: 30px;
    }

    .past {
        background-color: #FF0000;
    }

    .tag {
        width: 30px;
        height: 30px;
        border-radius: 5px;
        text-align: center;
        color: white;
        margin-left: 10px;
        margin-top: 3px;
    }

    .team {
        background-color: #01A65A;
    }

    .item-stat-t {
        color: #ff6f62;
        font-size: 30px;
        text-align: right;
        margin-right: 20px;
    }

    .item-content {
        width: 720px;
        height: 190px;
        flex-direction: row;
    }

    .item-supper-content {
        width: 720px;
        height: 126px;
        flex-direction: row;
    }

    .content-ul {
        width: 650px;
        flex-direction: column;
    }

    .content-t {
        height: 63px;
        font-size: 30px;
        margin-left: 10px;
        padding-top: 15px;
    }

    .item-link {
        width: 70px;
        align-items: center;
        justify-content: center;
    }

    .item-link-i {
        width: 50px;
        height: 50px;
    }

    .item-btns {
        border-top-width: 1px;
        border-top-color: #dddddd;
        height: 80px;
        flex-direction: row;
    }

    .item-btn {
        width: 240px;
        align-items: center;
        justify-content: center;
    }

    .head-top {
        height: 50px;
        width: 750px;
        background-color: #01A65A;
    }

    .head-panel {
        height: 80px;
        width: 750px;
        background-color: #01A65A;
        flex-direction: row;
    }

    .head-left {
        width: 200px;
        height: 80px;
    }

    .head-middle {
        width: 350px;
        height: 80px;
        align-items: center;
        justify-content: center;
    }

    .head-middle-t {
        font-size: 30px;
        color: white;
    }

    .head-right {
        height: 80px;
        width: 200px;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
    }

    .customer-head-add {
        width: 48px;
        height: 48px;
    }

    .customer-head-search {
        width: 48px;
        height: 48px;
        margin-left: 20px;
        margin-right: 20px;
    }


</style>


<script>

    import {WxcPopover} from 'weex-ui'
    import tagPage from './components/tabPage.vue'
    import address from './address/address.vue'
    import myUser from './user/myUser.vue'
    import headBar from './components/headBar.vue'
    import nw from './network/nw.js'

    var nav = weex.requireModule("navigator")
    var imgPrefix = 'root:img/indexIcon/'

    export default {
        components: {WxcPopover, tagPage, address, myUser, headBar},
        data() {
            return {
                logoUrl: 'http://img1.vued.vanthink.cn/vued08aa73a9ab65dcbd360ec54659ada97c.png',
                target: 'World',
                index: 0,
                barCheckedColor: '#00c470',
                btns: [
                    {
                        icon: `${imgPrefix}un-home.png`,
                        text: '首页',
                        key: 'home',
                        url: 'root:com/yx/index.js',
                        style: {}
                    },
                    {
                        icon: `${imgPrefix}un-customer.png`,
                        text: '客户',
                        key: 'customer',
                        url: '',
                        style: {}
                    },
                    {
                        icon: `${imgPrefix}un-address.png`,
                        text: '通讯录',
                        key: 'address',
                        url: 'root:com/yx/address/address.js',
                        style: {}
                    },
                    {
                        icon: `${imgPrefix}un-user.png`,
                        text: '我的',
                        key: 'my',
                        url: '',
                        style: {}
                    }
                ],
                popoverPosition: {x: 480, y: 140},
                popoverArrowPosition: {pos: 'top', x: 190},
                releBtns: [
                    {
                        icon: 'root:img/prop/text.png',
                        text: '发文本',
                        key: 'text'
                    },
                    {
                        icon: 'root:img/prop/camera.png',
                        text: '相机',
                        key: 'camera'
                    },
                    {
                        icon: 'root:img/prop/photo.png',
                        text: '相册',
                        key: 'photo'
                    },
                    {
                        icon: 'root:img/prop/video.png',
                        text: '视频',
                        key: 'video'
                    }
                ],
                customerIndex: 0,
                buyers: [],
                suppers: []
            }
        },

        computed: {},
        methods: {

            changeBarIcon(index) {
                var data = this.btns[index]
                return this.index == index ? `${imgPrefix}${data.icon.replace('un-', '')}` : `${imgPrefix}${data.icon}`
            },

            onchange(p) {

//                this.toast(p.index)
            },
            update: function (e) {
                this.target = 'Weex'
                console.log('target:', this.target)
            },
            change(i) {

                for (let index in this.btns) {
                    var item = this.btns[index]
                    var newIcon = item.icon.replace(`${imgPrefix}`, '')
                    var style = {}
                    if (index == i) {
                        newIcon = imgPrefix + newIcon.replace('un-', '')
                        style = {'color': this.barCheckedColor}
                    } else {
                        newIcon = imgPrefix + 'un-' + newIcon.replace('un-', '')
                    }
                    Vue.set(this.btns[index], 'icon', newIcon)
                    Vue.set(this.btns[index], 'style', style)
                }

                this.index = i
            },

            //发布按钮显示提示层
            minibarRightButtonClick() {
                this.$refs['wxc-popover'].wxcPopoverShow()
            },

            //发布跳转的页面
            popoverButtonClicked(obj) {
//                nav.pushParam(`root:com/yx/speech/speechAdd.js`, {type: obj.key})
            },

            show() {
//                this.toast(12312)
            },

            changeCustomer: function (index) {
                this.customerIndex = index;
            },

            formatTime: function (time) {
                if (!time) {
                    return ''
                }
                return dtl.formatDay(time)
            },

            getStatName: function (statCode) {
                switch (statCode) {
                    case 1000:
                        return '已注册'
                    case 1100:
                        return '已退出'
                    case 1200:
                        return '已认证'
                    case 1400:
                        return '未注册'
                    case 1500:
                        return '已删除'
                }
            },

            //应还款显示格式
            getRepayAmount: function (v) {
                if (!v.accountPeriod) {
                    return `${v.repayAmount}`
                } else {
                    return `${v.repayAmount}（账期：${v.accountPeriod}个月，还款日${v.repayDay}号）`
                }

            },

            //格式化联系人
            getlinkman: function (v) {
                if (v.linkman) {
                    if (v.linkman_mobile) {
                        return `${v.linkman}（${v.linkman_mobile}）`
                    } else {
                        return `${v.linkman}`
                    }
                } else {
                    return ''
                }
            },

            //跳转新增客户
            jumpCustomerByAdd:function () {
                if(!utils.lockEventDeferFree(event)) {
                    nav.push('root:com/yx/customers/customerAdd.js')
                }
            },

            //客户新建跟进记录
            jumpFollowByAdd:function (userId,userType) {
                var modal = weex.requireModule('modal')
                modal.toast({message:111})
                nav.pushParam('root:com/yx/follow/followAdd.js',{userId:userId,userType:userType} )
            },

            //跳转搜索页面或添加页面
            jumpSearchOrAdd:function (name) {
                if(name == 'add') {
                    nav.push('root:com/yx/customers/customerAddjs')
                }else{
                    nav.push('root:com/yx/customers/searchCustomer.js')
                }
            }
        },
        created: function () {
            var modal = weex.requireModule('modal')
            modal.toast({message:123})
            //设置首页为默认选中页面
            this.change(0)
            var self = this
            nw.postDefine('/app/userSupplier/list', {
                progress: false,
                success(res) {
                    self.buyers = res.buyer
                    self.suppers = res.supper
                }
            })
        },
    }
</script>